import React, { useEffect, useMemo, } from 'react'
import TodoItem from './TodoItem'
import { connect } from 'react-redux'
function TodoList(props) {
    const { list } = props
    useEffect(() => {
        console.log(props.list, "list数据")
    })
    // 统计所有
    const connt1 = useMemo(() => {
        return list.length
    }, [list])
    // 统计完成
    const connt2 = useMemo(() => {
        return list.filter(item => item.completed).length
    }, [list])
    // 未完成
    const connt3 = useMemo(() => {
        return list.filter(item => !item.completed).length
    }, [list])

    return (
        <div className='todo-list container'>
            <div className="tabs">
                <ul className="ul">
                    <li className="is-active" ><span className="span" >所有({connt1})</span></li>
                    <li><span className="span">已完成({connt2})</span></li>
                    <li><span className="span">未完成({connt3})</span></li>
                </ul>
            </div>


            <div className="columns is-multiline is-mobile">
                {
                     list.map((item) => (

                        <TodoItem key={item.id} item={item}></TodoItem>
                    ))
                        
                     }

            </div>
        </div>

    )
}
const mapStateToProps = state => ({
    list: state.list,
})


export default connect(mapStateToProps )(TodoList)
